<template>
  <div class="good-actions">
    <div class="action-item" @click="handleLike">
      <el-link
        :type="isLiked ? 'success' : 'info'"
        :underline="false"
        :disabled="likeLoading"
        class="action-link"
      >
        <i class="el-icon-star-off action-icon like-icon"></i>
        {{ isLiked ? "已点赞" : "点赞" }}
        <span class="action-count">({{ likeCount }})</span>
      </el-link>
    </div>

    <div class="action-item" @click="handleFavorite">
      <el-link
        :type="isFavorited ? 'success' : 'info'"
        :underline="false"
        :disabled="favoriteLoading"
        class="action-link"
      >
        <i class="el-icon-collection-tag action-icon favorite-icon"></i>
        {{ isFavorited ? "已收藏" : "收藏" }}
        <span class="action-count">({{ favoriteCount }})</span>
      </el-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodActions",
  props: {
    goodsId: {
      type: [String, Number],
      required: true
    },
    userId: {
      type: [String, Number],
      required: true
    },
    initialLikeCount: {
      type: Number,
      default: 0
    },
    initialFavoriteCount: {
      type: Number,
      default: 0
    },
    initialIsLiked: {
      type: Boolean,
      default: false
    },
    initialIsFavorited: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      likeCount: this.initialLikeCount,
      favoriteCount: this.initialFavoriteCount,
      isLiked: this.initialIsLiked,
      isFavorited: this.initialIsFavorited,
      likeLoading: false,
      favoriteLoading: false
    };
  },
  mounted() {
    // 确保初始状态正确设置
    this.likeCount = this.initialLikeCount;
    this.favoriteCount = this.initialFavoriteCount;
    this.isLiked = this.initialIsLiked;
    this.isFavorited = this.initialIsFavorited;
  },
  watch: {
    // 监听props变化，更新本地状态
    initialIsLiked: {
      handler(newVal) {
        this.isLiked = newVal;
      },
      immediate: true
    },
    initialIsFavorited: {
      handler(newVal) {
        this.isFavorited = newVal;
      },
      immediate: true
    },
    initialLikeCount: {
      handler(newVal) {
        this.likeCount = newVal;
      },
      immediate: true
    },
    initialFavoriteCount: {
      handler(newVal) {
        this.favoriteCount = newVal;
      },
      immediate: true
    },
    // 监听用户登录状态变化
    userId: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          // 用户登录状态改变时，重置状态
          this.isLiked = false;
          this.isFavorited = false;
        }
      },
      immediate: false
    }
  },
  methods: {
    // 更新本地状态的方法，供父组件调用
    updateLocalState(isLiked, isFavorited, likeCount, favoriteCount) {
      this.isLiked = isLiked;
      this.isFavorited = isFavorited;
      this.likeCount = likeCount || this.initialLikeCount;
      this.favoriteCount = favoriteCount || this.initialFavoriteCount;
    },

    async handleLike() {
      if (this.likeLoading) return;
      
      // 检查用户是否登录
      if (!this.userId) {
        this.$message.warning("请先登录");
        return;
      }

      this.likeLoading = true;
      try {
        const url = this.isLiked ? "/like/goods/unlike" : "/like/goods";
        const formData = new FormData();
        formData.append('userId', Number(this.userId));
        formData.append('goodsId', Number(this.goodsId));
        const response = await this.$axios.post(url, formData);

        if (response.data.success === true) {
          if (this.isLiked) {
            this.likeCount--;
            this.isLiked = false;
            this.$message.success("取消点赞成功");
          } else {
            this.likeCount++;
            this.isLiked = true;
            this.$message.success("点赞成功");
          }
          // 触发父组件更新
          this.$emit("like-change", {
            isLiked: this.isLiked,
            likeCount: this.likeCount
          });
        } else {
          this.$message.error(response.data.message || "操作失败");
        }
      } catch (error) {
        console.error("点赞操作失败:", error);
        this.$message.error("操作失败，请稍后重试");
      } finally {
        this.likeLoading = false;
      }
    },

    async handleFavorite() {
      if (this.favoriteLoading) return;

      // 检查用户是否登录
      if (!this.userId) {
        this.$message.warning("请先登录");
        return;
      }

      this.favoriteLoading = true;
      try {
        const url = this.isFavorited ? "/favorite/remove" : "/favorite/add";
        const formData = new FormData();
        formData.append('userId', Number(this.userId));
        formData.append('goodsId', Number(this.goodsId));
        const response = await this.$axios.post(url, formData);

        if (response.data.success === true) {
          if (this.isFavorited) {
            this.favoriteCount--;
            this.isFavorited = false;
            this.$message.success(response.data.message || "取消收藏成功");
          } else {
            this.favoriteCount++;
            this.isFavorited = true;
            this.$message.success(response.data.message || "收藏成功");
          }
          // 触发父组件更新
          this.$emit("favorite-change", {
            isFavorited: this.isFavorited,
            favoriteCount: this.favoriteCount
          });
        } else {
          this.$message.error(response.data.message || "操作失败");
        }
      } catch (error) {
        console.error("收藏操作失败:", error);
        this.$message.error("操作失败，请稍后重试");
      } finally {
        this.favoriteLoading = false;
      }
    }
  }
};
</script>

<style scoped>
.good-actions {
  display: flex;
  gap: 20px;
  padding: 15px 0;
}

.action-item {
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-item:hover {
  transform: translateY(-1px);
}

.action-link {
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.action-icon {
  margin-right: 5px;
  font-size: 16px;
  transition: color 0.3s ease;
}

.like-icon {
  color: #909399; /* 默认黑色 */
}

.action-link[type="success"] .like-icon {
  color: #67c23a; /* 点赞后变绿色 */
}

.favorite-icon {
  color: #909399; /* 默认黑色 */
}

.action-link[type="success"] .favorite-icon {
  color: #67c23a; /* 收藏后变绿色 */
}

.action-link:hover {
  transform: scale(1.05);
}

.action-count {
  font-size: 14px;
  color: #999;
  font-weight: normal;
  margin-left: 3px;
}

.action-link:hover .action-count {
  color: inherit;
}
</style>
